<template>
  <div :id="$props.domId" class="chart-container" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EchartBox',
  components: {},
  props: {
    domId: {
      type: String,
      required: true,
      default: 'chart-container'
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    // this.initChart()
  },
  beforeDestroy() {
    // 执行组件销毁前的清理工作
    window.removeEventListener('resize', this.handleResize)
    this.myChart.dispose() // 销毁echarts实例
  },
  methods: {
    /**
     * @param setOption 配置选项
     */
    initChart(setOption) {
      const _this = this
      // 初始化图表，设置配置项
      this.$nextTick(() => {
        _this.myChart = echarts.init(document.getElementById(_this.domId))
        _this.myChart.setOption(setOption)
        // 窗口发生变化时，重新绘制图表
        window.addEventListener('resize', _this.handleResize)
      })
    },
    handleResize() {
      this.myChart && this.myChart.resize()
    }
  }
}
</script>

<style scoped>

</style>
